/*
 * @Author: Drc
 * @Date: 2020-06-23 14:02:01
 * @LastEditors: Drc
 * @LastEditTime: 2021-11-08 10:42:55
 */
import React from 'react'
import Modal, {ModalProps} from 'react-native-modal'
import Toast from 'react-native-easy-toast'
import System from '@path/config/system'

export interface PopProps extends ModalProps {
  onClose: Function
}

export default class Pop<T extends PopProps> extends React.Component<T> {
  constructor(props: any) {
    super(props)
  }

  static defaultProps: PopProps = {
    onClose: () => {},
  }

  renderContent = () => {
    return this.props.children
  }

  //关闭回调
  onClose = () => {}

  onModalShow = () => {}

  onModalHide = () => {}

  showToast = (content: any) => {
    this.refs?.toast?.show(content, 1000)
  }

  _renderToast = () => {
    return (
      <Toast
        ref="toast"
        position="top"
        positionValue={400}
        textStyle={{color: '#fff'}}
        style={{
          backgroundColor: 'rgba(0,0,0,0.4)',
        }}
      />
    )
  }

  render() {
    const {onClose, children, style, ...other} = this.props

    return (
      <Modal
        style={{
          flex: 1,
          margin: 0,
          alignItems: 'center',
          justifyContent: 'center',
          width: System.width,
          ...style,
        }}
        onModalShow={this.onModalShow}
        onModalHide={this.onModalHide}
        onBackdropPress={() => {
          this.onClose()
          typeof onClose === 'function' && onClose()
        }}
        onBackButtonPress={() => {
          this.onClose()
          typeof onClose === 'function' && onClose()
        }}
        animationIn="fadeIn"
        animationOut="fadeOut"
        deviceHeight={System.height}
        deviceWidth={System.width}
        useNativeDriver
        {...other}>
        {this.renderContent()}
        {this._renderToast()}
      </Modal>
    )
  }
}
